/**
 * 主题配置文件
 * 用于管理系统的主题切换功能
 * 包含主题列表定义、主题切换、初始化和获取当前主题的功能
 */

/**
 * 主题工具
 * 用于设置和获取主题，以及管理主题相关样式和配置
 */

/**
 * 所有可用主题列表
 */
export const themes = [
  {
    name: 'blue',
    label: '蓝色主题',
    color: '#0165FF',
    buttonType: 'primary'
  },
  {
    name: 'red',
    label: '红色主题',
    color: '#e84749',
    buttonType: 'danger'
  },
  {
    name: 'navy',
    label: '深蓝主题',
    color: '#0c2b54',
    buttonType: 'primary'
  },
  {
    name: 'light-blue',
    label: '浅蓝主题',
    color: '#62a7ff',
    buttonType: 'primary'
  },
  {
    name: 'cyan',
    label: '青色主题',
    color: '#14c0c0',
    buttonType: 'primary'
  },
  {
    name: 'green',
    label: '绿色主题',
    color: '#67c23a',
    buttonType: 'success'
  }
]

/**
 * 修复标签主题色
 * 某些情况下标签色需要特别处理
 */
const fixTagTheme = () => {
  const theme = localStorage.getItem('theme') || 'blue'
  document.documentElement.setAttribute('data-tag-theme', theme)

  // 调整Element Plus标签样式
  const style = document.createElement('style')
  style.setAttribute('id', 'dynamic-theme-style')
  
  // 查找主题对应的颜色
  const themeObj = themes.find(item => item.name === theme) || themes[0]
  const color = themeObj.color
  
  // 转换颜色为RGB格式
  const hexToRgb = hex => {
    const bigint = parseInt(hex.slice(1), 16)
    const r = (bigint >> 16) & 255
    const g = (bigint >> 8) & 255
    const b = bigint & 255
    return [r, g, b].join(',')
  }
  
  // 如果是十六进制颜色，转换为RGB
  const rgb = color.startsWith('#') ? hexToRgb(color) : color.match(/\d+,\s*\d+,\s*\d+/)[0]
  
  // 生成CSS变量
  style.innerHTML = `
    :root {
      --primary-tag-bg-color: rgba(${rgb}, 0.1);
      --primary-tag-border-color: rgba(${rgb}, 0.2);
      --primary-tag-text-color: ${color};
    }
    
    .el-tag--primary {
      background-color: var(--primary-tag-bg-color) !important;
      border-color: var(--primary-tag-border-color) !important;
      color: var(--primary-tag-text-color) !important;
    }
  `
  
  // 移除之前的样式（如果有）
  const oldStyle = document.getElementById('dynamic-theme-style')
  if (oldStyle) {
    oldStyle.remove()
  }
  
  document.head.appendChild(style)
}

/**
 * 更新Element Plus组件的主题
 * 使用CSS变量来控制Element Plus组件的主题色
 */
const updateElementTheme = () => {
  // 获取当前主题或使用默认主题
  const theme = localStorage.getItem('theme') || 'blue'
  
  // 设置Element Plus的主题属性
  document.documentElement.setAttribute('data-el-theme', theme)
  
  // 为body添加主题类，便于全局主题控制
  document.body.className = `theme-${theme}`
  
  // 获取主题色
  const themeObj = themes.find(item => item.name === theme) || themes[0]
  const color = themeObj.color
  
  // 转换颜色为RGB格式，用于创建透明色
  const hexToRgb = hex => {
    const bigint = parseInt(hex.slice(1), 16)
    const r = (bigint >> 16) & 255
    const g = (bigint >> 8) & 255
    const b = bigint & 255
    return [r, g, b].join(',')
  }
  
  // 设置Element Plus的CSS变量
  if (color.startsWith('#')) {
    const rgb = hexToRgb(color)
    document.documentElement.style.setProperty('--el-color-primary', color)
    document.documentElement.style.setProperty('--el-color-primary-rgb', rgb)
    
    // 设置不同透明度的主题色变量
    document.documentElement.style.setProperty('--el-color-primary-light-3', `rgba(${rgb}, 0.8)`)
    document.documentElement.style.setProperty('--el-color-primary-light-5', `rgba(${rgb}, 0.6)`)
    document.documentElement.style.setProperty('--el-color-primary-light-7', `rgba(${rgb}, 0.4)`)
    document.documentElement.style.setProperty('--el-color-primary-light-8', `rgba(${rgb}, 0.2)`)
    document.documentElement.style.setProperty('--el-color-primary-light-9', `rgba(${rgb}, 0.1)`)
    document.documentElement.style.setProperty('--el-color-primary-dark-2', `rgba(${rgb}, 0.9)`)
  }
}

/**
 * 初始化主题设置
 * 应用启动时，从本地存储恢复用户的主题选择
 */
export const initTheme = () => {
  // 获取保存的主题或使用默认蓝色主题
  const savedTheme = localStorage.getItem('theme') || 'blue'
  
  // 应用主题
  setTheme(savedTheme)
  
  // 监听存储变化，在多标签页中同步主题
  window.addEventListener('storage', (e) => {
    if (e.key === 'theme') {
      updateElementTheme()
      fixTagTheme()
      // 触发主题变化事件，便于组件响应
      window.dispatchEvent(new CustomEvent('themeChange', { 
        detail: { theme: e.newValue } 
      }))
    }
  })
}

/**
 * 设置主题
 * @param {string} theme 主题名称
 */
export const setTheme = (theme) => {
  // 保存主题到本地存储
  localStorage.setItem('theme', theme)
  
  // 设置根元素的数据属性
  document.documentElement.setAttribute('data-theme', theme)
  
  // 更新Element Plus组件的主题
  updateElementTheme()
  
  // 修复标签色
  fixTagTheme()
  
  // 触发主题变化事件
  window.dispatchEvent(new CustomEvent('themeChange', { 
    detail: { theme } 
  }))
}

/**
 * 获取当前主题
 * @returns {string} 当前主题名称
 */
export const getTheme = () => {
  return localStorage.getItem('theme') || 'blue'
}

/**
 * 获取当前主题对应的按钮类型
 * @returns {string} 按钮类型
 */
export const getThemeButtonType = () => {
  const currentTheme = getTheme()
  const themeConfig = themes.find(t => t.name === currentTheme)
  return themeConfig ? themeConfig.buttonType : 'primary'
}

/**
 * 获取当前主题颜色
 * @returns {string} 主题颜色
 */
export const getThemeColor = () => {
  const currentTheme = getTheme()
  const themeConfig = themes.find(t => t.name === currentTheme)
  return themeConfig ? themeConfig.color : '#0165FF'
}

/**
 * 获取主题对应的文字颜色
 * @param {string} theme 主题名称
 * @returns {string} 文字颜色
 */
export const getThemeTextColor = (theme = getTheme()) => {
  // 文字颜色映射
  const textColors = {
    'blue': '#0165FF',
    'red': '#e84749',
    'navy': '#0c2b54',
    'light-blue': '#62a7ff',
    'cyan': '#14c0c0',
    'green': '#67c23a'
  }
  
  return textColors[theme] || '#0165FF'
}

/**
 * 动态获取CSS变量的值
 * @param {string} variableName CSS变量名称
 * @returns {string} CSS变量的值
 */
export const getCssVariable = (variableName) => {
  return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim()
}

// 为了兼容，添加getCssVar作为getCssVariable的别名
export const getCssVar = getCssVariable

/**
 * 设置CSS变量
 * @param {string} variableName CSS变量名称
 * @param {string} value CSS变量的值
 */
export const setCssVar = (variableName, value) => {
  document.documentElement.style.setProperty(variableName, value)
}

/**
 * 主题管理工具
 */
// 主题配置
export const themesConfig = {
  blue: {
    primary: '#0165FF',
    success: '#67c23a',
    warning: '#e6a23c',
    danger: '#f56c6c',
    info: '#909399',
    textColor: '#303133',
    textColorSecondary: '#606266',
    textColorPlaceholder: '#c0c4cc',
    borderColor: '#dcdfe6',
    backgroundColor: '#f5f7fa'
  },
  red: {
    primary: '#f56c6c',
    success: '#67c23a',
    warning: '#e6a23c',
    danger: '#f56c6c',
    info: '#909399',
    textColor: '#303133',
    textColorSecondary: '#606266',
    textColorPlaceholder: '#c0c4cc',
    borderColor: '#dcdfe6',
    backgroundColor: '#f5f7fa'
  },
  navy: {
    primary: '#324157',
    success: '#67c23a',
    warning: '#e6a23c',
    danger: '#f56c6c',
    info: '#909399',
    textColor: '#303133',
    textColorSecondary: '#606266',
    textColorPlaceholder: '#c0c4cc',
    borderColor: '#dcdfe6',
    backgroundColor: '#f5f7fa'
  }
}

/**
 * 十六进制颜色转RGB
 * @param {String} hexColor 十六进制颜色
 * @returns {Object} RGB颜色对象
 */
function hexToRgb(hexColor) {
  // 去除#号
  hexColor = hexColor.replace('#', '')
  
  // 处理简写形式，如#abc转为#aabbcc
  if (hexColor.length === 3) {
    hexColor = hexColor.split('').map(char => char + char).join('')
  }
  
  // 转换为RGB
  const r = parseInt(hexColor.substring(0, 2), 16)
  const g = parseInt(hexColor.substring(2, 4), 16)
  const b = parseInt(hexColor.substring(4, 6), 16)
  
  return { r, g, b }
}

/**
 * 设置主题
 * @param {String} themeName 主题名称
 */
export function setThemeConfig(themeName) {
  // 获取主题配置，默认为蓝色主题
  const theme = themesConfig[themeName] || themesConfig.blue
  
  // 同步设置原始主题对象
  const originalTheme = themes.find(item => item.name === themeName) || themes[0]
  
  // 设置主题数据属性
  document.documentElement.setAttribute('data-theme', themeName)
  
  // 设置根CSS变量
  const root = document.documentElement
  
  // 先确保颜色格式一致
  if (originalTheme && originalTheme.color) {
    theme.primary = originalTheme.color
  }
  
  const hexToRgb = (hexColor) => {
    // 去除#号
    hexColor = hexColor.replace('#', '')
    
    // 处理简写形式，如#abc转为#aabbcc
    if (hexColor.length === 3) {
      hexColor = hexColor.split('').map(char => char + char).join('')
    }
    
    // 转换为RGB
    const r = parseInt(hexColor.substring(0, 2), 16)
    const g = parseInt(hexColor.substring(2, 4), 16)
    const b = parseInt(hexColor.substring(4, 6), 16)
    
    return { r, g, b }
  }
  
  // 设置主色及其RGB形式
  const primaryRgb = hexToRgb(theme.primary)
  root.style.setProperty('--primary-color', theme.primary)
  root.style.setProperty('--primary-color-rgb', `${primaryRgb.r}, ${primaryRgb.g}, ${primaryRgb.b}`)
  
  // 设置功能色
  root.style.setProperty('--success-color', theme.success)
  root.style.setProperty('--warning-color', theme.warning)
  root.style.setProperty('--danger-color', theme.danger)
  root.style.setProperty('--info-color', theme.info)
  
  // 设置文本颜色
  root.style.setProperty('--text-color', theme.textColor)
  root.style.setProperty('--text-color-secondary', theme.textColorSecondary)
  root.style.setProperty('--text-color-placeholder', theme.textColorPlaceholder)
  
  // 设置边框和背景色
  root.style.setProperty('--border-color', theme.borderColor)
  root.style.setProperty('--background-color', theme.backgroundColor)
  
  // 保存主题到本地存储
  localStorage.setItem('theme', themeName)
  
  // 更新 Element Plus 组件的主题变量
  if (theme.primary.startsWith('#')) {
    const rgb = `${primaryRgb.r}, ${primaryRgb.g}, ${primaryRgb.b}`
    document.documentElement.style.setProperty('--el-color-primary', theme.primary)
    document.documentElement.style.setProperty('--el-color-primary-rgb', rgb)
    
    // 设置不同透明度的主题色变量
    document.documentElement.style.setProperty('--el-color-primary-light-3', `rgba(${rgb}, 0.8)`)
    document.documentElement.style.setProperty('--el-color-primary-light-5', `rgba(${rgb}, 0.6)`)
    document.documentElement.style.setProperty('--el-color-primary-light-7', `rgba(${rgb}, 0.4)`)
    document.documentElement.style.setProperty('--el-color-primary-light-8', `rgba(${rgb}, 0.2)`)
    document.documentElement.style.setProperty('--el-color-primary-light-9', `rgba(${rgb}, 0.1)`)
    document.documentElement.style.setProperty('--el-color-primary-dark-2', `rgba(${rgb}, 0.9)`)
  }
  
  // 触发主题变化事件
  window.dispatchEvent(new CustomEvent('themeChange', { 
    detail: { theme: themeName } 
  }))
}

/**
 * 获取当前主题
 * @returns {String} 当前主题名称
 */
export function getThemeConfig() {
  return localStorage.getItem('theme') || 'blue'
}

/**
 * 初始化主题
 */
export function initThemeConfig() {
  const savedTheme = localStorage.getItem('theme') || 'blue'
  setThemeConfig(savedTheme)
} 